<template>
	<view class="conter">
		<view class="iconsos">
			<u-icon name="checkbox-mark" size="28" color="#46a6f8"></u-icon>
			<view class="success">上架成功</view>
		</view>
		<view class="containerone">
			<u--image width="112rpx" height="112rpx" radius="14rpx" style="margin: 35rpx" :src="imgUrl + gillimg" mode=""></u--image>
			<view class="akpapa">
				<view class="name" style="margin-left: 130rpx">#{{ gillname }}</view>
			</view>
			<u-icon @click="gomarket" class="icon" bold color="#fff" name="arrow-right"></u-icon>
		</view>
		<view class="containertow">
			<view class="containertow1">订单详情</view>
			<view class="akpapa">
				<view class="containertow2">
					<view class="">数量：</view>
					<view class="txt">×1</view>
				</view>
				<view class="containertow2">
					<view class="">订单金额：</view>
					<view class="txt">
						{{ gillprice }}
					</view>
				</view>
				<view class="containertow3">
					<view class="">订单编号：</view>
					<view class="txt">
						{{ hashValue }}
					</view>
					<u--image
						width="20rpx"
						height="20rpx"
						style="margin-top: 10rpx"
						@click="copyText(hashValue)"
						class="imgsos"
						:src="imgUrl+'/static/images/iconimgpopoak47.png'"
						alt=""
					></u--image>
				</view>
			</view>
		</view>
		<view class="akjiji">
			<view class="">
				<u--image width="28rpx" height="28rpx" style="position: absolute; margin-top: 5rpx; margin-left: 100rpx"  :src="imgUrl + '/static/images/renzhen.png'"  mode=""></u--image>
			</view>
			订单状态：上架成功于{{ timer }}
		</view>
		<view class="clpmklj">
			<button @click="gomessage" style="width: 209rpx; background: #1c1f25">继续寄售</button>
			<button @click="gomarket" style="width: 436rpx">查看藏品</button>
		</view>
	</view>
</template>

<script>
import config from '@/config';
export default {
	data() {
		return {
			timer: '',
			gillimg: '',
			gillprice: 0,
			gillname: '',
			gillnum: 0,
			id: '',
			imgUrl: config.gillUrl,
		};
	},
	onLoad(option) {
		this.gillimg = option.propImg;
		this.gillprice = option.unitPrice;
		this.gillname = option.propName;
		this.gillnum = option.number;
		this.id = option.id;
		this.hashValue = option.hashValue;
	},
	created() {
		this.addDate();
	},
	methods: {
		handleGoBack() {
			uni.switchTab({
				url: '/pages/work/message'
			});
		},
		//获取当前日期函数
		addDate() {
			let nowDate = new Date();
			let date = {
				year: nowDate.getFullYear(),
				month: nowDate.getMonth() + 1,
				date: nowDate.getDate(),
				//时 getHours()：(0 ~ 23)
				hour: nowDate.getHours(),
				//分 getMinutes()： (0 ~ 59)
				minute: nowDate.getMinutes(),
				//秒 getSeconds()：(0 ~ 59)
				second: nowDate.getSeconds()
			};
			if (date.minute < 10) {
				date.minute = '0' + date.minute;
			}
			this.timer = date.year + '年' + date.month + '月' + date.date + '日' + date.hour + ':' + date.minute;
			// console.log(this.timer, "pppp");
		},

		gomarket() {
			uni.switchTab({
				url: '/pages/work/market' // 跳转到市场
			});
			
		},
		gomessage() {
			uni.navigateTo({
				url: '/pages/work/message' // 跳转到场馆
			});
		},
		copyText(number) {
			uni.setClipboardData({
				data: this.hashValue , // Order number to copy
				success: () => {
					uni.showToast({
						title: '订单号已复制',
						icon: 'success'
					});
				},
				fail: () => {
					uni.showToast({
						title: '复制失败',
						icon: 'none'
					});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.header_tabs {
	display: flex;
	padding: 80rpx 20rpx;
	.txt {
		margin-left: 36%;
		font-size: 34rpx;
		font-family:"font"; 
		font-weight: 800;
		color: #ffffff;
		line-height: 49rpx;
	}
}
.imgsos {
	// position: absolute;
	width: 25rpx;
	height: 25rpx;
	margin-top: 5rpx;
	margin-left: -50rpx;
}
.iconsos {
	width: 680rpx;
	display: flex;
	text-align: center;
	padding-left: 300rpx;
	color: #fff;
	.success {
		margin-top: 10rpx;
		margin-left: 10rpx;
	}
}
.conter {
	.containerone {
		width: 680rpx;
		height: 181rpx;
		background: #15142d;
		box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		opacity: 1;
		margin: 40rpx 34.88rpx 39rpx;
		display: flex;
		justify-content: space-between;

		img {
			width: 112rpx;
			height: 112rpx;
			box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
			border-radius: 14rpx;
			margin: 34.88rpx;
		}

		.icon {
			margin-right: 48.6rpx;
		}

		.akpapa {
			font-size: 28rpx;
			font-family:"font"; 
			font-weight: 400;
			color: #ffffff;
			margin-left: -365rpx;
			margin-top: 70rpx;
		}
	}

	.containertow {
		width: 680rpx;
		height: 300rpx;
		background: #15142d;
		box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		opacity: 1;
		margin: 0 34.88rpx;
		position: relative;

		.containertow1 {
			position: absolute;
			font-size: 28rpx;
			font-family:"font"; 
			font-weight: 800;
			color: #ffffff;
			line-height: 35rpx;
			margin: 17.14rpx 26.16rpx;
		}

		.akpapa {
			position: absolute;
			bottom: 0;

			.containertow2 {
				font-size: 28rpx;
				font-family:"font"; 
				font-weight: 400;
				color: #8a92a3;
				margin: 27.91rpx 26.16rpx;
				width: 600rpx;
				overflow: hidden;
				display: flex;
				justify-content: space-between;
				.txt {
					font-size: 28rpx;
					font-family:"font"; 
					font-weight: 400;
					color: #ffffff;
				}
			}
			.containertow3 {
				font-size: 28rpx;
				font-family:"font"; 
				font-weight: 400;
				color: #8a92a3;
				margin: 27.91rpx 26.16rpx;
				width: 600rpx;
				overflow: hidden;
				display: flex;
				justify-content: space-between;
				.txt {
					font-size: 28rpx;
					font-family:"font"; 
					font-weight: 400;
					color: #ffffff;
					width: 200px;
					/* 设置容器宽度 */
					overflow: hidden;
					/* 限制文本内容的显示区域 */
					text-overflow: ellipsis;
					/* 超过宽度时显示省略号 */
					white-space: nowrap;
					/* 确保文本不换行 */
				}
			}
		}

		.iconimgpopoak47 {
			position: absolute;
			margin-top: -58rpx;
			right: -220rpx;
			img {
				width: 26rpx;
				height: 26rpx;
			}
		}
	}

	.akjiji {
		font-size: 24rpx;
		font-family:"font"; 
		font-weight: 400;
		color: #8a92a3;
		margin-top: 147rpx;
		text-align: center;
		position: relative;

		img {
			position: absolute;
			width: 28rpx;
			height: 28rpx;
			margin-top: 5rpx;
			margin-left: -40rpx;
		}
	}

	.clpmklj {
		width: 750rpx;
		height: 112rpx;
		background: #13151a;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		position: fixed;
		bottom: 0;
		display: flex;
		padding: 17rpx 35rpx;

		button:nth-child(1) {
			width: 209rpx;
			height: 77rpx;
			background: #1c1f25;
			box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			opacity: 1;
			font-size: 28rpx;
			font-family:"font"; 
			font-weight: 400;
			color: #ffffff;
			line-height: 77rpx;
		}
		button:nth-child(2) {
			width: 436rpx;
			height: 77rpx;
			background: linear-gradient(90deg, #3ADFEB 0%, #4463FF 100%);
			box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			opacity: 1;
			font-size: 28rpx;
			font-family:"font"; 
			font-weight: 400;
			color: #ffffff;
			line-height: 77rpx;
		}
	}
}
</style>
